<template>
	<view class="login-container">
		<view class="logo-container">
		  <image class="logo" src="/static/images/landoubao.png" mode="aspectFit"></image>
		  <view class="slogan">
		            <text class="slogan-text">用AI发现天赋，赋能成长</text>
		  </view>
		  
		</view>
		<!--授权登录-->
		<view class="login-btn-container">
		  <button class="wechat-btn"  @click="authLogin">
			<!-- <image class="wechat-icon" src="/static/images/wx.png"></image> -->
			<text>用户快捷登录</text>
		  </button>
		</view> 
		<!-- 隐私协议-->
		<view class="agreement">
		        <checkbox-group @change="handleAgreementChange">
		          <label class="checkbox-label">
					<checkbox :checked="agreementChecked" style="transform:scale(0.6)" color="#547BDB" />
		            <text class="agreement-text">我已阅读并同意</text>
		          </label>
		        </checkbox-group>
		        <view class="protocol-links">
		          <!--<text class="link" @click="showPrivacy">《隐私协议》</text>-->
				  <text class="link" :data-src="Lystk" @click="navigateToAgreement">《隐私协议》</text>
		          <text>和</text>
		          <text class="link" :data-src="Lyhxy"  @click="navigateToAgreement">《用户协议》</text>
		        </view>
		      </view>
		
		<!-- 协议弹窗 -->
		    <uni-popup ref="popup" type="center">
		      <view class="protocol-popup">
		        <view class="popup-header">
		          <text class="popup-title">{{currentProtocolTitle}}</text>
		          <uni-icons 
		            type="closeempty" 
		            size="24px" 
		            color="#999" 
		            @click="closeAgreement"
		          />
		        </view>
		        <scroll-view class="popup-content" scroll-y>
		          <text class="protocol-content">{{currentProtocolContent}}</text>
		        </scroll-view>
		        <button class="popup-confirm" type="default" @click="closeAgreement">我知道了</button>
		      </view>
		    </uni-popup>
		
		 
		
		<!-- //授权弹框 -->
		<view class="auth_wrap" :class="isAuth?'show':''">
			<view class="mask"></view>
			<view class="auth_content">
				<view class="auth_top">
					<view class="ptitle">获取您的昵称、头像</view>
					<view class="txt">获取用户头像、昵称信息，主要用于完善个人资料，向用户提供更好使用体验</view>
					<view class="close" @tap="closePopup">
						<image src="../../static/close_x.png" mode=""></image>
					</view>
				</view>
				<view class="auth_ul">
					<view class="auth_li">
						<view class="tit">头像</view>
						<view class="rit">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" :src="avatarUrl"></image>
							</button>
						</view>
					</view>
					<view class="auth_li">
						<view class="tit">昵称</view>
						<view class="rit">
							<input type="nickname" class="weui-input" placeholder="请输入昵称" @blur="onNickname" />
						</view>
						
					</view>
				</view>
				<view class="confirm_btn" @tap.stop="WxgetUserProfile">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
import { resolveDirective } from 'vue';
import { pathToBase64 } from '../../common/image.js' 
import { yhxy,ystk } from '../../config/index';
import { getPrivacy} from '../../api/userApi';
export default {
  data(){
	  return {
		userInfo:{
			nickname:'',
			avatarUrl:'',
			phone:'',
			id:null
		},//用户信息
		token:null,//登录态
		avatarUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',  // 头像URL
		nickname: ''   ,// 昵称
		phone:'',
		isAuth: false, //控制授权弹框显示与隐藏
		isFrist: '', //判断是否是第一次授权
		agreementChecked : false,
		currentProtocolTitle:'',
		currentProtocolContent:'',
		Lystk: ystk,
		Lyhxy:yhxy,
		privacyContent : `
		隐私协议内容...
		
		1. 我们如何收集和使用您的个人信息
		   - 为了向您提供服务，我们需要收集您的微信昵称和头像信息
		   - 我们承诺不会将您的信息用于其他用途
		
		2. 我们如何保护您的个人信息
		   - 采用加密技术保护数据传输
		   - 严格限制内部人员访问权限
		
		3. 您的权利
		   - 您可以随时查看、修改或删除您的个人信息
		   - 您可以选择不提供某些信息，但这可能影响部分服务功能
		`,
		userAgreementContent : `
		用户协议内容...
		
		1. 服务条款
		   - 本协议是您与平台之间的法律协议
		   - 使用本服务即表示您同意本协议的所有条款
		
		2. 用户行为规范
		   - 不得发布违法、侵权内容
		   - 不得干扰平台正常运行
		
		3. 责任限制
		   - 平台不对服务的中断或终止承担责任
		   - 用户需自行承担使用风险
		`

	  }
  },
  onLoad(){
	//用于判断是否是首次授权，有值说明不是首次授权，没有值说明是首次授权
	let AlertLogin = uni.getStorageSync('AlertLogin');
	const res = getPrivacy();
	console.log("协议", res)
	if(res.userProtocol && res.privacy){
	    Lystk = res.privacy;
		Lyhxy = res.userProtocol;
	}
	if (AlertLogin) {
	  	console.log('登录过一次')
	  	this.isFrist = 2
	} else {
		console.log('首次登录');
		this.isFrist = 1
	}
  },
  methods: {
	navigateToAgreement(e){
		//uni.navigateTo({
		//	url: `/pages/agreement/${tab}`
		//});
		var current = e.target.dataset.src;
		uni.showLoading({
		  title: '正在加载文件...',
		  mask: true
		})
		uni.downloadFile({
		  url: current,
		  success: function (res) {
		    console.log('res', res);
		    uni.hideLoading()
		    let filePath = res.tempFilePath
		    uni.openDocument({
		      filePath: filePath,
		      success: function (res) {
		        console.log('打开文档成功')
		      },
		    });
		  },
		  fail() {
		    uni.hideLoading()
		  }
		});
	},
	handleAgreementChange(e) {
	      this.agreementChecked = e.detail.value.length > 0;
	},
	
	//跳转隐私协议和用户协议
	showPrivacy ()  {
	  this.currentProtocolTitle = '隐私协议';
	  this.currentProtocolContent = this.privacyContent;
	  this.$refs.popup.open();
	},
	
	showUserAgreement()  {
	  this.currentProtocolTitle = '用户协议';
 	  this.currentProtocolContent = this.userAgreementContent;
	  this.$refs.popup.open();
	},
	
	closeAgreement() {
	  this.$refs.popup.close()
	},
	// 微信登录
	authLogin() {
		//首次授权，出现授权弹框，以后退出后再登录则直接登录上去，不再出现授权弹框
		if (!this.agreementChecked) {
			uni.showToast({
				title: '请先阅读并同意协议',
				icon: 'none'
			});
			return;
		}
		console.log(this.isFrist);
		if (this.isFrist == 1) {
			this.isAuth = true;
		} else {
			this.isAuth = false;
			this.WxgetUserProfile();
		}
	},
	//关闭授权弹框
	closePopup() {
		this.isAuth = false;
	},
	//监听昵称变化
	onNickname(e) {
		this.nickname = e.detail.value;
	},
	
	//获取头像变化的值
	onChooseAvatar(e) {
		let _this = this;
		//将微信返的临时图片转为base64格式图
		pathToBase64(e.detail.avatarUrl).then(base64 => {
			//console.log(base64)
			// this.avatarUrl = base64;
			console.log(e.detail.avatarUrl);
			this.avatarUrl = e.detail.avatarUrl;
		}).catch(error => {
			console.error(error)
		})
	},
	
	//微信登录接口
	WxgetUserProfile() {
		let _this = this;
		if (this.isFrist == 1) {
			// 授权授权时提示输入昵称
			if (!this.nickname) {
				this.$message.info('请输入昵称');
				return
			}
		}
		uni.showLoading({
			title: '登录中...'
		});
		let code = '';
		wx.login({
			success: res => {
				code = res.code;
			}
		})
		// 用于保存会员资料
		uni.getUserProfile({
			desc: '用于完善会员资料',
			success: infoRes => {
				this.userInfo.avatarUrl = this.avatarUrl;
				this.userInfo.nickname = this.nickname;
				//请求后台授权登录接口
				uni.request({
					url:'https://api.landoubao.com/api/auth/wechatLogin',
					method:'POST',
					data:{
						code:code,
						userInfo:this.userInfo,
					},
					header: { // 设置请求的header
					    'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						uni.hideLoading();
						this.token = res.data.data.token
						//4.存储token
						uni.setStorageSync('token',this.token);
						uni.setStorageSync("AlertLogin",true);
						//获取用户数据
						uni.request({
							url:'https://api.landoubao.com/api/user/info',
							method:'POST',
							header:{
								'Authorization': uni.getStorageSync("token"),
							},
							success: (res) => {
								console.log(res);
								if(!uni.getStorageSync("userInfo")){
									this.userInfo.avatarUrl = res.data.data.avatarUrl;
									this.userInfo.nickname = res.data.data.nickname;
									this.userInfo.id = res.data.data.id;
									console.log(this.userInfo);
									uni.setStorageSync('userInfo',this.userInfo);
								}
								
								uni.switchTab({
									url: '/pages/myDevices/myDevices'
								});
							}
						})
					},
					fail :(err) => {
						console.log('请求失败', err);
						uni.hideLoading();
					}
				});
				
			},
			fail: err => {
				console.log('fail');
				uni.hideLoading();
			}
		})
	},
  }
}
</script>

<style scoped lang="scss" >
	
//授权弹框 start
	.auth_wrap {
		position: fixed;
		width: 100%;
		bottom: -120%;
		transition: all 0.35s linear;

		&.show {
			bottom: 0;
			transition: all 0.35s linear;

			.mask {
				display: block;
			}
		}

		.mask {
			width: 100%;
			height: 100vh;
			position: fixed;
			background: rgba(0, 0, 0, 0.5);
			z-index: 98;
			top: 0;
			display: none;
		}

		.auth_content {
			padding: 32rpx 32rpx 72rpx 32rpx;
			position: relative;
			z-index: 99;
			background: #fff;
			border-radius: 16rpx 16rpx 0 0;

			.auth_top {
				position: relative;

				.ptitle {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 24rpx;
				}

				.txt {
					font-size: 26rpx;
					color: #999;
				}

				.close {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					right: 0;
					top: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.auth_ul {
				margin-top: 16rpx;

				.auth_li {
					display: flex;
					align-items: center;
					border-top: solid 1px #f5f5f5;
					padding: 24rpx 0;

					&:last-child {
						border-bottom: solid 1px #f5f5f5;
					}

					.tit {
						width: 140rpx;
						font-size: 30rpx;
					}

					.rit {
						width: calc(100% - 140rpx);

						input {
							font-size: 28rpx;
							height: 72rpx;
							width: 100%;
						}

						image {
							width: 54rpx;
							height: 54rpx;
							border-radius: 50%;
						}

						button {
							width: 100%;
							height: 72rpx;
							background: #fff;
							text-align: left;
							padding: 0;

							&:after {
								border: solid 1px #fff;
							}

							// opacity: 0;
						}
					}
				}
			}

			.confirm_btn {
				width: 420rpx;
				margin: 46rpx auto 0 auto;
				background: #39b54a;
				color: #fff;
				border-radius: 8rpx;
				height: 94rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
			}
		}
	}

	//授权弹框 end	
	
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient( 180deg, #547BDB 0%, #E0EEFB 100%);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100rpx;
}
.logo {
	position: absolute;
	width: 432.82rpx;
	height: 277.64rpx;
	top:167rpx;
	left:186.84rpx ;
}
.app-name {
  position: absolute;
  font-size: 24rpx;
  font-weight: bold;
  margin-top: 20rpx;
  color: #333;
}
.login-btn-container {
  width: 80%;
  margin-bottom: 40rpx;
  
}
.wechat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007AFF;
  color: white;
  border-radius: 50rpx;
  padding: 20rpx 0;
  font-size: 32rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.3);
  
  width: 628rpx;
  height: 98rpx;
}
.wechat-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 15rpx;
}
.agreement-container {
  
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 350;
  font-size: 24rpx;
  color: #999;
  line-height: 24rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.agreement-text {
  margin-left: 10rpx;
}

.agreement-link {
  color: #1989fa;
  margin: 0 5rpx;
}
.avatar-upload {
  text-align: center;
  margin-bottom: 20px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}
.nickname-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.slogan {
  text-align: center;
}

.slogan-text {
	position: absolute;
	top: 504rpx;
	left: 123rpx;
	font-size: 48rpx;
	//font-family: "YouSheBiaoTiHei-Bold",cursive ;
	font-family: "Gill Sans Extrabold", sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 62rpx;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
	font-style: italic;
}

.link {
  color: #2979FF;
  margin: 0 10rpx;
}
.agreement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 26rpx;
  color: #999;
}

.agreement-container {
  font-family: Source Han Sans, Source Han Sans;
  font-size: 26rpx;
  flex-wrap: wrap;
  
  color: #999;
  // line-height: 24rpx;
  // text-align: center;
  // font-style: normal;
  // text-transform: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}

.agreement-text {
  margin-left: 10rpx;
}

.protocol-links {
  display: flex;
  align-items: center;
}


.protocol-popup {
  width: 700rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.popup-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-content {
  max-height: 700rpx;
  padding: 30rpx;
}

.protocol-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.popup-confirm {
  margin: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  border-radius: 40rpx;
}




</style>